<template>
	<view class="my-balance">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">会员订单</block>
		</cu-custom>

		<view class="record-content">
			<view class="record-list">
				<view @tap="wuliu(items.tracking_number)" v-for="items in applyList" :key="items.id" class="apply-item">
					<view class="apply-content">
						<view class="apply-title">{{ items.order_sn}}</view>
						<view>{{ items.pname }}</view>

						<view class="apply-info" v-if="items.tracking_number">{{ items.tracking_number }}</view>
						<view>快递单号: (点击单号进去查看快递进度)</view>
						<view class="apply-time">{{ items.createtime | formDates }}</view>
					</view>
					<view :class="['apply-status', 'solid', changeStatus(items)]">{{ changeText(items) }}</view>

					<text class="apply-num">{{ items.pay_price }}<text class="money-label">元</text></text>
				</view>
				<uni-load-more v-if="applyList.length" :status="more" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import banlance from '@/api/banlance';
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";

	export default {
		data() {
			return {
				isActive: 'entry',
				more: 'more',
				page: 1,
				applyList: [],
			};
		},
		filters: {
			formDates(times) {
				const date = new Date(times * 1000);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');
				const second = String(date.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			},
		},
		onLoad() {
			this.getRecord(this.isActive);
		},
		components: {
			uniLoadMore,
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
			changeStatus() {
				return (items) => {
					switch (items.pay_status) {
						case 'unpaid':
							return 'bg-green';
						case 'paid':
							return 'bg-red';
						default:
							return 'bg-black';
					}
				};
			},
			changeText() {
				return (items) => {
					switch (items.pay_status) {
						case 'unpaid':
							return '未支付';
						case 'paid':
							return '已支付';
						default:
							return '未支付';
					}
				};
			},
		},
		methods: {
			wuliu(no) {
				if (!no) {
					uni.showToast({
						title: '尚未发货'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/my/balance/wuliu?no=' + no
				})
			},
			async getRecord(type) {
				const res = await banlance.getLevelOrder({
					page: this.page
				});
				if (res.code === 1) {
					this.applyList = this.applyList.concat(res.data);
					this.more = res.data.length ? 'more' : 'noMore';
				}
			},
		},
	};
</script>

<style lang="less">
	.my-balance {
		background-color: #fff;
		// color: #ccc;

		.record-content {
			.record-list {
				background-color: #f7f7f7;
			}

			.apply-item {
				// height: 150rpx;
				padding: 10px 30rpx;
				background: #fff;
				margin-bottom: 3rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.apply-content {

					.apply-title,
					.apply-info {
						font-size: 28rpx;
					}

					.apply-time {
						font-size: 23rpx;
						color: #888;
					}
				}

				.apply-status {
					height: 50rpx;
					line-height: 50rpx;
					width: 120rpx;
					text-align: center;
					border-radius: 12rpx;
				}

				.apply-num {
					font-size: 32rpx;
					font-weight: 550;
					color: #f00;
				}
			}
		}
	}
</style>